<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UserCenter</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/wangyeicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/font-awesome.css">
    <link rel="stylesheet" href="../../css/current.css">
    <link rel="stylesheet" href="../../css/set_model.css">
    <style type="text/css">
        section.mt-3{
            margin-top: 0px !important;
        }
        div.shadow-sm{
            margin-top: 0px !important;
            box-shadow: none !important;
            border-right: 1px solid lightgray ;
        }
        .innerInfo{
            padding: 0px;
        }
        .innerAvatar{
            padding-right: 0px;
        }

    </style>
</head>
<body>
    <!-- 头部导航栏 -->
    <nav class="bg-white  shadow-sm  sticky-top">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar p-3 navbar-expand-lg navbar-light">
                        <a class="navbar-brand" href="#">
                            <img src="../../images/logo1.png" class="img-fluid" style="max-width:80px;" alt="logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">组队广场</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" href="#">
                                        活动广场
                                    </a>
                                </li>
                            </ul>
                            <ul class="navbar-nav ml-md-auto">
                                <li class="nav-item dropdown">
                                    <a class="btn btn-outline-primary nav-item  dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        发起<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cursor" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
                                    </svg>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
                                        <a class="dropdown-item " href="#">发起组队</a>
                                        <a class="dropdown-item " href="#" target="_blank">发起活动</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="btn btn-primary nav-item" href="#">
                                        消息<span class="badge badge-light ml-2">8</span>
                                            <span class="sr-only">unread messages</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-item  dropdown-toggle mr-md-2" href="#" id="my" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <img class="img-fluid rounded-circle pl-2 ml-1" src="../../images/logo.jpg" style="max-width: 50px">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="my">
                                        <a class="dropdown-item " href="#">我的卡片</a>
                                        <a class="dropdown-item " href="#" target="_blank">个人中心</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item btn btn-primary btn-lg logoff-btn" href="#" data-toggle="modal" data-target="#logoffModal">退出登陆</a>
                                    </div>

                                </li>
                            </ul>

                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </nav>
    <section class="mt-3">
        <div class="container">
            <div class="container">
                <!-- 分类导航栏 -->
                <div class="row">
                    <div class="col">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb bg-white small">
                                <li class="breadcrumb-item"><a href="#">组队广场</a></li>
                                <li class="breadcrumb-item"><a href="#">软设</a></li>
                                <li class="breadcrumb-item active" aria-current="page">软设大赛急需前端！！</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="row mt-3">
                    <!-- 左侧栏 -->
                    <div class="col-lg-8 col-sm-12 shadow-sm" >
                        <!-- 左侧栏头部 -->
                        <div class="row">
                            <div class="col-2 ml-4 innerAvatar">
                                <img src="../../images/logo.jpg" alt="头像" class="rounded-circle ml-2 shadow" style="max-width: 60px;">
                            </div>
                            <div class="col-6 ml-3 innerInfo" id="div1" style="position: relative">
                                <p  style="max-height: 10px;">NickName</p>
                                <p class="small text-primary">@username</p>
                                <p class="small text-muted" style="margin-top: -10px;">发布于:2020-10-10 14:00</p>
                            </div>
                            <div id="div2" style="position: relative; top: 10px; right: 2px;width: 40px;height: 30px; line-height: 30px">
                                <img src="../../images/view.png" alt="" style="width: 20px;height: 20px;margin-bottom: 3px;">
                                <p style="display: inline-block; font-size: 18px;">5</p>
                            </div>
                        </div>
                        <div class="ml-5 mt-3" style="line-height: 15px;">
                            <div class="row">
                                <h5 class="font-weight-normal">软设大赛急需前端！！</h5>
                            </div>
                            <div class="row mt-2 text-muted">
                                <p class="col-2" style="margin-left: -15px;">队伍简介：</p>
                                <p class="col-10">一个年轻且有激情的软设参赛队伍</p>
                            </div>
                            <div class="row mt-2 text-muted">
                                <p class="col-2" style="margin-left: -15px;">招募要求：</p>
                                <p class="col-10">男女不限，老少咸宜</p>
                            </div>
                            <div class="row mt-2 text-muted">
                                <p class="col-2" style="margin-left: -15px;">所需人数：</p>
                                <p class="col-10">3</p>
                            </div>
                            <div class="row mt-2 text-muted">
                                <p class="col-2" style="margin-left: -15px;">发布时间：</p>
                                <p class="col-10">2020年9月30日17点54分</p>
                            </div>
                            <div class="row mt-2 text-muted">
                                <p class="col-2" style="margin-left: -15px;">结束时间：</p>
                                <p class="col-10">2020年10月30日17点54分</p>
                            </div>
                            <div class="row mt-2 text-muted">
                                <p class="col-2" style="margin-left: -15px;">招募状态：</p>
                                <p class="col-10">正在招募...</p>
                            </div>
                            <div class="row mt-2 text-muted">
                                <p class="col-4" style="margin-left: -15px;">招募内容：</p>
                            </div>
                            <div class="row text-muted">
                                <p class="col-12 overflow-auto" style="margin-left: -15px;line-height: 20px;height: 180px;" >这是招募内容....这是招募内容....这是招募内容....
                                    这是招募内容....这是招募内容....这是招募内容....这是招募内容....这是招募内容....
                                    这是招募内容....这是招募内容....这是招募内容....这是招募内容....这是招募内容....
                                    这是招募内容....这是招募内容....这是招募内容....这是招募内容....这是招募内容....
                                    这是招募内容....这是招募内容....这是招募内容....这是招募内容....这是招募内容....
                                </p>
                            </div>
                            <div class="row justify-content-end mb-2 text-right">
                                <div class="col-3">
                                    <button type="button" class="btn btn-outline-primary"><i class="fa fa-envelope-o" aria-hidden="true"></i>联系我!</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 右侧栏-->
                    <div class="col-lg-3 ml-3 d-none d-lg-block shadow-sm mb-5" style="max-height: 260px;">
                        <h5 class="mt-3 text-muted" >关于作者</h5>
                        <div class="row mt-3 mb-3">
                            <div class="col-5">
                                <div>
                                    <img src="../../images/logo.jpg" alt="头像" style="max-width: 100px;" class="rounded-circle shadow-sm text-center">
                                </div>
                            </div>
                            <div class="col-7">
                                <p class="pt-3">Nickname</p>
                                <p class="text-primary small" style="margin-top: -10px">@username</p>
                                <p class="text-info small" style="margin-top: -10px">18级计算机科学技术</p>
                            </div>
                        </div>
                        <div class="dropdown-divider"></div>
                        <div class="row justify-content-center mt-3">
                            <div class="col-4 text-muted text-center">
                                <p class="small">点赞数</p>
                                <p class="font-weight-bold" style="margin-top: -10px">123</p>
                            </div>
                            <div class="col-4 text-muted text-center">
                                <p class="small">主题数</p>
                                <p class="font-weight-bold" style="margin-top: -10px">123</p>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- <footer class="footer mt-auto py-3 fixed-bottom shadow" style="background: lightgrey"> 
        <div class="container">
            <span class="text-muted ml-2">@WDNBD</span>
        </div>
    </footer> -->

    <!-- 退出登录的模态框 -->
    <div class="modal fade" id="logoffModal" tabindex="-1" role="dialog" aria-labelledby="logoffModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="prompt-text">点击"确定"退出账号</div>
                    <div class="bgimg_lf"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.bundle.js"></script>
</body>
</html>